<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script src="/layer/layer.js"></script>
 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        #pwdLength span {
            display: none;
            float: left;
            height: 14px;
            width: 51px;
            font-size: 12px;
            text-align: center;
            line-height: 14px;
            color: white;
            border-right: 1px solid white;
        }
    </style>
</head>
<body>
<form id="myForm" action="index.html" method="post" class="definewidth m20">
<input type="hidden" name="userId" value="" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">登录名</td>
            <td><input type="text" name="userLoginName"/></td>
        </tr>
        <tr>
            <td class="tableleft">密码</td>
            <td><input type="password" name="userPassword"/>
            </td>
            <td  style="width: 75%">
                <div  id="pwdLength">
                    <span style=" background-color:#999;">弱</span>
                    <span style=" background-color:#666;">中</span>
                    <span style=" background-color:#333;">强</span>
                </div>
                <div  id="pwdPrompt">
                    密码可由字母、数字、特殊符号组成，长度为6-18个字符
                </div>
            </td>
        </tr>
        <tr>
            <td class="tableleft">真实姓名</td>
            <td><input type="text" name="userTrueName"/></td>
        </tr>
        <tr>
            <td class="tableleft">邮箱</td>
            <td><input type="text" name="userEmail"/></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" id="valid" name="userState" value="0" checked/> 启用
                <input type="radio" id="invalid" name="userState" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">角色</td>
            <td>
                <select name="roleId">

                </select>
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="btnUpdate" class="btn btn-primary" type="button">更新</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {       
		$('#backid').click(function(){
            window.location.href = "index.html?pageNum="+pageNum+"&pageSize="+pageSize;
		 });
        getRoleList();
        $("input[name='userPassword']").blur(function () {
            check_pwd();
        });
        let url = document.location.toString();//获取URL
        let userId=url.GetValue("userId");
        let pageNum=url.GetValue("pageNum");
        let pageSize=url.GetValue("pageSize");
        queryById(userId);
        $("#btnUpdate").click(function () {
            // alert($("#myForm").serialize());
            let userLoginName = $("input[name='userLoginName']").val();
            let password = $("input[name='userPassword']").val();
            let trueName = $("input[name='userTrueName']").val();
            let email = $("input[name='userEmail']").val();
            let roleId=$("select[name='roleId']").val();
            if (validate(userLoginName, password, trueName, email,roleId)) {
                updateUser(pageNum,pageSize);
            }
        });
    });
    function getRoleList() {
        $.ajax({
            type: "GET",
            url: "/user/roleList",
            data: "",
            dataType: "json",
            success: function (vo) {
                let roleList = vo.list;
                let str = " <option value=\"-1\">--请选择--</option>";
                for (let i = roleList.length - 1; i >= 0; i--) {
                    let obj = roleList[i];
                    str += "<option value=\""+obj.roleId+"\">"+obj.roleName+"</option>";
                }
                $("select[name='roleId']").html(str);
            }
        });
    }
    function queryById(userId) {
        $.ajax({
            type: "GET",
            url: "/user/" + userId,
            data: "",
            dataType: "json",
            success: function (vo) {
                //alert( "Data Saved: " + vo );
                let obj = vo.obj;
                let userId = obj.userId;
                let userLoginName = obj.userLoginName;
                let userPassword = obj.userPassword;
                let userTrueName = obj.userTrueName;
                let userEmail = obj.userEmail;
                let userState = obj.userState;
                let roleId = obj.role.roleId;
                $("input[name='userId']").val(userId);
                $("input[name='userLoginName']").val(userLoginName);
                $("input[name='userPassword']").val(userPassword);
                $("input[name='userTrueName']").val(userTrueName);
                $("input[name='userEmail']").val(userEmail);
                if(userState==1){
                    $("input[id='invalid']").attr("checked",true);
                }else {
                    $("input[id='valid']").attr("checked",true);
                }
                $("select[name='roleId']").val(roleId);
            }
        });
    }
    function updateUser(pageNum,pageSize) {
        //alert( $("#myForm").serialize());
        $.ajax({
            type: "POST",//这里必须写POST.在后台会转成put类型的请求
            url: "/user/",
            data: $("#myForm").serialize()+"&_method=PUT",
            dataType:"json",
            success: function(vo){
                if(vo.code==200) {
                    window.location.href = "index.html?pageNum="+pageNum+"&pageSize="+pageSize;
                    //layer.msg("更新成功！");
                }else{
                    layer.msg(vo.msg);
                }
            }
        });
    }
    String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    function validate(userLoginName, password, trueName, email,roleId) {
        var regName = /^\w{4,}$/;
        var regPassword = /\w{6,}|\W{6,}/;
        var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
        if (userLoginName == null || userLoginName == "") {
            layer.msg("登录名不能为空");
            return false;
        }
        if (!regName.test(userLoginName)) {
            layer.msg("用户名至少四位");
            return false;
        }
        if (password == null || password == "") {
            layer.msg("密码不能为空");
            return false;
        }
        if (!regPassword.test(password)) {
            layer.msg("密码至少六位");
            return false;
        }
        if (trueName == null || trueName == "") {
            layer.msg("真实姓名不能为空");
            return false;
        }
        if (email == null || email == "") {
            layer.msg("邮箱不能为空");
            return false;
        }
        if (!regEmail.test(email)) {
            layer.msg("邮箱格式错误");
            return false;
        }
        if (roleId==-1) {
            layer.msg("请选择角色");
            return false;
        }
        return true
    }


    function check_pwd() {
        var reg1 = /(^\d{6,}$)|(^[a-zA-Z]{6,}$)|(^[^a-zA-Z0-9]{6,}$)/; //数字，字母或符号其中的一种
        var reg7 = /\d*\D*((\d+[a-zA-Z]+[^0-9a-zA-Z]+)|(\d+[^0-9a-zA-Z]+[a-zA-Z]+)|([a-zA-Z]+\d+[^0-9a-zA-Z]+)|([a-zA-Z]+[^0-9a-zA-Z]+\d+)|([^0-9a-zA-Z]+[a-zA-Z]+\d+)|([^0-9a-zA-Z]+\d+[a-zA-Z]+))\d*\D*/; //数字字母字符任意组合
        var pwd = $("input[name='userPassword']").val();
        if (pwd.length < 6) {
            $("#pwdLength").css("display", "none");
            $("#pwdPrompt").css("display", "block");
            $("#pwdPrompt").html("密码长度不能小于6位");
            return false;
        } else {
            $("#pwdLength").css("display", "block");
            $("#pwdPrompt").css("display", "none");
            if (reg1.test(pwd)) {
                $("#pwdLength span:eq(0)").css("display", "block");
                $("#pwdLength span:eq(1)").css("display", "none");
                $("#pwdLength span:eq(2)").css("display", "none");
                return true;
            } else if (!reg7.test(pwd)) {
                $("#pwdLength span:eq(0)").css("display", "block");
                $("#pwdLength span:eq(1)").css("display", "block");
                $("#pwdLength span:eq(2)").css("display", "none");
                return true;
            } else {
                $("#pwdLength span:eq(0)").css("display", "block");
                $("#pwdLength span:eq(1)").css("display", "block");
                $("#pwdLength span:eq(2)").css("display", "block");
                return true;
            }
            return true;
        }
    }
</script>